<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>评论</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
            border: 0 none; /*font-family: inherit; font-size: 100%;font-weight: 400; line-height: 1; */
            font-style: normal;
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        ol, ul {
            list-style: none outside none;
        }

        q:before, q:after, blockquote:before, blockquote:after {
            content: "";
        }

        body {
            font-family: 'Microsoft YaHei', SimSun, sans-serif, '\65b9\6b63\5170\4ead\9ed1';
            color: #404040;
        }

        a {
            text-decoration: none;
        }

        h4 {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.2;
        }

        h6 {
            color: #8E949C;
            font-size: 11px;
            font-weight: normal;
            line-height: 15px;
            margin: 0 0 6px;
        }

        .global-nav {
            margin: 10px 0 18px;
        }

        .pull-right {
            float: right !important;
        }

        div.resetbox {
            border: 0 none;
            font-size: 100%;
            margin: 0;
            padding: 0;
            text-align: left;
        }

        div.resetbox select, div.resetbox input, div.resetbox textarea, div.resetbox select option {
            border: 0 none;
            margin: 0;
            outline: 0 none;
            padding: 0;
        }

        .icon {
            display: inline-block;
            vertical-align: middle;
        }

        .uyanpost .sectionbox {
            padding: 0 0 18x;
        }

        .uyanpost .sectionbox .blockbox .postarea {
            margin: 0 0 12px;
        }

        .uyanpost .sectionbox .blockbox .postarea .postborder textarea {
            height: 100px;
            width: 100%;
            box-shadow: none;
            border: 1px solid #DFDFDF;
            box-sizing: border-box;
            padding: 10px;
            border-radius: 3px;
        }

        .post-list .post .uyanpost .sectionbox .blockbox .postarea {
            padding: 0 0 0 48px;
            margin: 0 0 12px;
        }

        .inputdefaultcolor {
            color: #AAB2B8;
        }

        .post-list .post .children .post .children .post .children .uyanpost {
            margin-left: -48px;
        }

        .avatar {
            float: left;
        }

        .avatar .user {
            display: block;
            z-index: 10;
        }

        .avatar .user img {
            border-radius: 50%;
            display: block;
            height: 48px;
            width: 48px;
        }

        .nav {
            height: 40px;
            overflow: hidden;
            font-size: 14px;
            border-bottom: 1px solid #ebeef1;
            margin-bottom: 15px;
        }

        .nav .nav-left {
            float: left;
            line-height: 40px;
            cursor: pointer;
        }

        .nav span {
            display: block;
            line-height: 40px;
            color: #404040;
        }

        .nav b {
            display: block;
            float: left;
            margin-right: 4px;
        }

        .post-list {
        }

        .post-list .post {
            z-index: 10;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px
        }

        .post-list .post .post {
            border-bottom: none
        }

        .post-content {
            margin-bottom: 24px;
            transition: all 0.2s ease-in-out 0s;
        }

        .post-content .avatar {
            top: 0;
        }

        .post-content .post-body {
            z-index: 10;
            *margin-top: -10px !important;
            margin-top: 0;
            _margin-top: -10px;
            margin-left: 80px;
        }

        .publisher-anchor-color span {
            color: #999999 !important;
        }

        .publisher-anchor-color a {
            color: #44708E !important;
        }

        .post-content .u-footer .time-ago, .post-content .u-header .total-votes, .post-content .u-header .parent-link {
            color: #AAB2B8;
            font-size: 12px;
            font-weight: normal;
            line-height: 16px;
        }

        .post-meta {
            float: left;
        }

        .post-content .post-message-container {
            overflow: hidden;
            z-index: 10;
            width: 100%;
            _width: 98%;
        }

        .post-content .post-message p {
            line-height: 30px;
            margin: 5px 0 2px 0;
            font-size: 14px;
            word-wrap: break-word;
            overflow: hidden;
        }

        .post-content .u-footer {
            color: #6C6C6C;
            margin: 2px 0 0;
            height: 18px;
            overflow: hidden;
            line-height: 18px;
        }

        .post-content .u-footer .time-ago {
            float: left;
        }

        .post-content .u-footer ul {
            float: right;
        }

        .post-content .u-footer ul li {
            display: block;
            float: left;
            font-size: 12px;
            line-height: 18px;
            list-style: none;
        }

        .post-content .u-footer ul li em {
            font-weight: normal;
            color: #DEE2E5;
            line-height: 16px;
            margin-right: 5px;
        }

        .post-content .u-footer a {
            color: #AAB2B8;
        }

        .post-content .u-footer .thread-voted {
            margin-right: 5px;
            cursor: pointer;
            height: 16px;
            overflow: hidden;
            font-size: 13px;
            line-height: 18px;
            display: block;
            float: left;
        }

        .post-content .u-footer .action:hover {
            color: #777F85;
        }

        .post-list .post .post .avatar .user img {
            height: 36px;
            width: 36px;
        }

        .post-list .post .post, .post-list .post .children .post {
            padding-left: 60px !important;
        }

        .post-list .post .children .post .children .post {
            padding-left: 48px !important;
        }

        .post-list .post .children .post .children .post .children .post .children .post {
            padding-left: 0px !important;
        }

        .post-list .post .uyanpost {
            padding-left: 60px;
        }

        .post-list .post .children .uyanpost, .post-list .post .children .post .children .uyanpost {
            padding-left: 48px !important;
        }

        .post-list .post .post .post-content .post-body {
            margin-left: 48px !important;
        }

        .btn {
            font-size: 14px;
            padding: 8px 20px;
            background: #ff4c2f;
            color: #fff;
            cursor: pointer;
            border-radius: 3px;
        }

        .more {
            border-radius: 3px;
            background: #f5f6f8;
            font-size: 14px;
            height: 36px;
            line-height: 36px;
            display: block;
            width: 100%;
            text-align: center;
            color: #fff;
            color: #404040;
        }

        .more:hover {
            background: #ebeef1;
        }

        .more span {
            display: block;
            border: 1px solid #CCD4D9;
            border-radius: 3px;
            height: 34px;
        }
    </style>
</head>
<body>
<!-- 未完成 -->
<div style="width: 100%; padding-bottom: 20px">
		<span id="counter-box">
			<div class="global-nav">
				<ul>
					<li>
						<h4 class="pull-left"
                            style="display: inline-block;font-weight: initial;font-size: 16px">精彩评论</h4>
					</li>
				</ul>
			</div>
		</span>
    <span id="post-box">
			<div class="uyanpost">
				<div class="resetbox sectionbox">
					<div class="blockbox">
						<div class="postarea">
							<div class="postborder">
                                <div style="background:#fff;width: 99.8%;height: 80px;font-size: 12px;box-sizing:border-box;padding:10px">
                                    <textarea name="content" id="content"></textarea>
                                </div>
                            </div>
							<div style="display: block;text-align: right;margin-top:38px">
								<button class="btn btn-info" onclick="subcomment();">发 送</button>
							</div>
						</div>
                        <input type="hidden" id="book_id" value="{$book.id}">
                        <input type="hidden" id="session_uid" value="{$xwx_user_id|default=-1}">
					</div>
				</div>
			</div>
		</span>
    <span id="nav-box">
			<div class="nav">
				<div class="nav-left">
					<span style="font-size: 16px;"> 最新评论</span>
				</div>
				<div class="claer"></div>
			</div>
		</span>
    <span id="posts">
        <ul id="post-list" class="post-list">
            {volist name="comments" id="vo"}
            <li class="post">
                <div class="post-content">
                    <div class="avatar hovercard">
                        <div class="user"><img src="/static/images/user-icon.png"></div>
                        <div style="color:#666;font-size: 12px;text-align: center;margin-top: 5px">{$vo.user.nick_name|default=$vo.user.username}</div>
                    </div>
                    <div class="post-body">
                        <div class="post-body-inner">
                            <div data-role="message-container" class="post-message-container">
                                <div data-role="message-content">
                                    <div class="post-message publisher-anchor-color">
                                        <p>{$vo.content|raw}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="u-footer">
                            <div class="time-ago">{$i}楼 {$vo.create_time|date='Y-m-d H:i:s'}</div>
                        </div>
                    </div>
                </div>
            </li>
            {/volist}
        </ul>
	</span>
    <span id="loadmore" style="display: none;"></span>
    <div class="ujian-uyan"></div>
</div>
<script>
    function subcomment() {
        console.log(111)
        var uid = $('#session_uid').val();
        var comment = $('#content').val();
        var book_id = $('#book_id').val();
        if (uid == '-1') {
            layer.msg('请先登录', {icon: 0,shade: 0.3})
        } else if (comment.length <= 0) {
            layer.msg('请勿提交空评论', {icon: 0,shade: 0.3})
        } else {
            $.post({
                url: '/pc/commentadd',
                data: {comment: comment, book_id: book_id},
                success(res) {
                    if (res.err == 1) {
                        layer.msg(res.msg,{icon: 0,shade: 0.3})
                    } else {
                        layer.msg(res.msg,{icon: 1,shade: 0.3})
                        setTimeout(function () {
                            location.reload();
                        },1000)
                    }
                },
                error(res) {
                    layer.msg('表单提交出错', {icon: 0,shade: 0.3})
                }
            })
        }
    }
</script>
</body>
</html>